<template>
	<view class="me">
		<view class="nav">
			<view class="myhead">
				<view class="me_img">
					<image src="../../static/icons/head.png"  @tap="showimage"></image>
				</view>
				<view class="myphone">
					<text>欢迎来到我的中心</text>
					<view class="my">
						{{User.userName}}
					</view>
				</view>
				<view class="logout">
					<image src="../../static/icons/logout.png"></image>
				</view>
			</view>
		</view>
		
			<view class="card_item"  v-for="item in List" :key="item.id">
				<view class="card_name">{{item.name}}</view>
				<image :src="item.imgUrl"></image>
			</view>		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				User:{},
				List:[
					{id:0,name:"我的收藏",imgUrl:"../../static/icons/colloer.png",path:""},
					{id:1,name:"我的购物车",imgUrl:"../../static/icons/cart.png",path:""},
					{id:2,name:"订单详情",imgUrl:"../../static/icons/order.png",path:""},
					{id:3,name:"立即退出",imgUrl:"../../static/icons/tuichu.png",path:""}],
				show:true
			}
		},
		onLoad(){
			this.User=JSON.parse(uni.getStorageSync("token"))
			console.log(this.User)
		},
		onShow() {
			
		},
		methods:{
			showimage(){
				console.log("hh")
				this.show=false
			}
		}
	}
</script>

<style scoped>
	.me{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #fff;
	}
	.myhead{
		position: relative;
		display: flex;
		margin: 25rpx;
		align-items: center;
		justify-content: space-around;
		width: 94%;
		height: 400rpx;
		border-radius: 5%;
		background-color: #f1f2f3;
	}
	.me_img{
		/* position: absolute; */
		/* left: 10%; */
		width: 250rpx;
		height: 250rpx;
		border-radius: 175rpx;
		background-color: #fff;
	}
	.me_img image{
		margin-top: 7%;
		margin-left: 7%;
		width: 90%;
		height: 90%;
	}
	.myphone{
		position: relative;
		
		font-weight: bold;
		font-size: 35rpx;
	}
	.my{
		width: 50%;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.logout{
		position: absolute;
		top: 6%;
		right: 6%;
	} 
	.logout image{
		width: 50rpx;
		height: 50rpx;
	},
	.card{
		position: absolute;
		width: 50%;

		background-color: #f1f2f3;
	/* 	width: 100%; */
	}
	.card_item{
		/* float: left; */
		width:90%;
		padding: 2%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin: 5% 2%;
		border-radius: 10%;
		background-color: #f1f2f3;
		/* height: 300rpx; */
	}
	.card_item image{
		width: 30%;
		height: 180rpx;
	}
	.card_name{
		font-weight: bold;
		font-size: 40rpx
	}
	
</style>